escription: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置:
https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
/**单位管理 */

<template>
  <div class="containerBox  ">
    <div class="unitWrap">
      <!-- 左侧梳妆列表结构 -->
      <cusCard>
        <div class="treeBox">
          <unitsTree :treeData="treeData" ref="unitTreeRef" @clickHandler="getUnitInfoList">
          </unitsTree>
        </div>
      </cusCard>

      <!-- 右侧table表格 -->
      <cusCard class="unitWrap-right cml-16">
        <cusButton color="#0052D9" @click="addHandler('add')" v-if="curUnitNode.canCreateSub == 1">
          <i-ep-plus />添加
        </cusButton>
        <cusTable :tableData="unitsTableData" :tableColumns="tableColumns" :loading="loading" :showSelect="false"
          :height="540">
          <template #operation="{ row }">
            <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)">编辑
            </cusButton>
            <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`确认删除${row.unitName}吗?`"
              @confirm="delHandler(row)">
              <template #reference>
                <cusButton style="color:#0052D9;padding:0" :text="true">删除</cusButton>
              </template>
            </el-popconfirm>

            <cusButton style="color:#0052D9;padding:0" :text="true" @click="resetHandler(row)">重置密码
            </cusButton>
          </template>
        </cusTable>

        <div class="cmt-16 float-right">
          <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
          </cusPagination>
        </div>
      </cusCard>

    </div>
    <editDialog ref="ediDialog" @onInit="getUnitsList"></editDialog>
    <resetPsd ref="resetPsdRef"></resetPsd>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import editDialog from "./components/editDialog.vue";
import resetPsd from "./components/resetPsd.vue";
import { UnitsColType, UnitsDataTye } from "@/api/tissuesframe/types";
import unitsTree from "./components/unitsTree.vue";
import {
  reqUnitTree,
  reqUnitInfoList,
  reqDeleteUnit,
} from "@/api/business/units";
const router = useRouter();

// 添加、编辑单位弹框
const ediDialog = ref(null);
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getUnitInfoList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getUnitInfoList();
};


// 点击添加事件
const addHandler = (type, row) => {
  if (type === "edit") {
    let obj = {
      loginName: row.adminUserLoginName,
      parentUnitCode: row.parentUnitCode, //上级单位
      unitName: row.unitName, //公司名称
      contactName: row.contactName, //联系人
      contactPhone: row.contactPhone, //联系电话
      address: row.address, //地址
      unitCode: row.unitCode,
      parentUnitName: row.parentUnitName,
    };
    ediDialog.value.showHandler();
    ediDialog.value.unitsForm = obj;
    return;
  }
  ediDialog.value.showHandler();
  ediDialog.value.unitsForm.parentUnitCode = curUnitNode.value.unitCode;
  ediDialog.value.unitsForm.parentUnitName = curUnitNode.value.unitName;
};

const resetPsdRef = ref(null);
const resetHandler = (row) => {
  resetPsdRef.value.show(row.adminUserId);
};

// 表格列数据
const tableColumns: UnitsColType[] = reactive([
  { label: "管理员账号", prop: "adminUserLoginName", width: "150" },
  { label: "单位名称", prop: "unitName", width: "150" },
  { label: "单位编码", prop: "unitCode", width: "150" },
  { label: "联系人", prop: "contactName" },
  { label: "地址", prop: "address", width: "200" },
  { label: "创建时间", prop: "gmtCreate", sortable: true, width: "200" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "200",
    fixed: "right",
  },
]);

// 树状列表数据
const treeData = ref([]);
const unitTreeRef = ref(null);
// 获取树状单位列表
const getUnitsList = () => {
  loading.value = true;
  reqUnitTree().then((res) => {
    loading.value = false;
    if (res.code === 1) {
      treeData.value = [
        {
          ...res.data,
          label: res.data.unitName,
        },
      ];
      if (res.data.children.length) {
        mapArrData(res.data.children);
      }
      curUnitNode.value = {
        unitName: res.data.unitName,
        unitCode: res.data.unitCode,
        canCreateSub: res.data.canCreateSub
      };
      getUnitInfoList(curUnitNode.value);
    }
  });
};

const mapArrData = (arr) => {
  arr.map((el) => {
    el.label = el.unitName;
    if (el.children.length) mapArrData(el.children);
  });

  return arr;
};

interface UnitNodeType {
  unitName?: string;
  unitCode?: string;
  canCreateSub?: string;
}

// 当前单位节点
const curUnitNode = ref<UnitNodeType>({});

const unitsTableData = ref([]);
// 获取单位列表
const getUnitInfoList = (node?: object) => {
  curUnitNode.value = node ? node : curUnitNode.value
  reqUnitInfoList({
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
    unitCode: curUnitNode.value.unitCode,
  }).then((res) => {
    if (res.code === 1) {
      unitsTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};

// 改变列排序
const changeCol = ({ oldIndex, newIndex }: PropType) => {
  const empty = 2; // 跳过选择框和序号列
  const oldItem = tableColumns[oldIndex - empty];
  tableColumns.splice(oldIndex - empty, 1);
  tableColumns.splice(newIndex - empty, 0, oldItem);
};

interface PropType {
  oldIndex: number;
  newIndex: number;
}
// 改变行排序
const changeRow = ({ oldIndex, newIndex }: PropType) => {
  const currRow = unitsTableData.splice(oldIndex, 1)[0];
  unitsTableData.splice(newIndex, 0, currRow);
};

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

const delHandler = (row: UnitsDataTye) => {
  console.log(row, 555);
  reqDeleteUnit({
    unitCode: row.unitCode,
  }).then((res) => {
    if (res.code === 1) {
      ElMessage.success("删除成功");
      getUnitsList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};

onMounted(() => {
  getUnitsList();
});
</script>

<style lang="scss" scoped>
.treeBox {
  height: 100%;
  overflow-x: auto;
}

.unitWrap {
  display: flex;
  height: 100%;

  &-right {
    flex: 1;
  }
}
</style>